<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-9">
            <div class="tabs-container">
                <ul class="nav nav-tabs" id="tab-list-2">
                    <li class="links active" id="search-link"><a href="#search" role="tab" data-toggle="tab">Search</a></li>
                </ul>
                <div class="tab-content">
                   <div id="search" class="tab-pane active">
                        <div class="panel-body">
                          <div class="ibox-title" style="border:none;"><h5 style="color: #00afef"><i>Read Attempts</i></h5>
                          </div>
                             <div class="ibox-content">
                                  <form class="form-horizontal" id="search_form">
                                    <div class="form-group">
                                      <label class="col-lg-4 control-label">Zone</label>
                                      <div class="col-lg-4">
                                        <select name="zone" class="form-control chosen" id="">
                                            <option value="">--</option>
                                            <?php foreach ($zones as $key): ?>
                                                <option value="<?php echo $key->zone_name; ?>"><?php echo $key->zone_name; ?></option>
                                            <?php endforeach;?>
                                        </select>
                                      </div>
                                    </div>
                                    <div class="form-group">
                                      <label class="col-lg-4 control-label">Meter Reader</label>
                                      <div class="col-lg-4">
                                        <select name="meter_reader" class="form-control chosen" id="">
                                            <option value="">--</option>
                                            <?php foreach ($meter_reader as $key): ?>
                                                <option value="<?php echo $key->user_id; ?>"><?php echo $key->name; ?></option>
                                            <?php endforeach;?>
                                        </select>
                                      </div>
                                    </div>
                                    <div class="form-group" id="data_1">
                                      <label class="col-lg-4 control-label">Reading From</label>
                                      <div class="col-lg-4 input-daterange input-group" id="datepicker">
                                          <input type="search" class="form-control" name="mr_from" value="">
                                          <span class="input-group-addon">to</span>
                                          <input type="search" class="form-control" name="mr_to" value="">
                                      </div>
                                    </div>
                                  </form>
                                   <center><a class="btn btn-primary btn-outline btn-md m-t-n-xs" id="getCon" type="button"><i class="fa fa-check fa-fw"></i> Get Status</a></p></center>
                                 <table style="width:100%;align:center;" class="dataTables table-bordered table-compact" id="reports">
                                  <thead>
                                    <tr>
                                        <th>Meter Reader</th>
                                        <th>Zone</th>
                                        <th>Account Number</th>
                                        <th class="no-sort">Read Date</th>
                                        <th class="no-sort">Read Attempt</th>
                                    </tr>
                                  </thead>
                                  <tbody id="tbod">
                                  </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- END of class row-->
</div>
 <script type="text/javascript">
  $(document).ready(function(){
       $('#data_1 .input-daterange').datepicker({
            keyboardNavigation: false,
            forceParse: false,
            autoclose: true,
            format: "dd-mm-yyyy"
        });
    $(".chosen").chosen({width:"100%;"});
    $('.dataTables').DataTable( {
                "columnDefs": [ {
                  "targets": 'no-sort',
                  "orderable": false,
            } ],
            "sDom": 'tip'
      });

   /* $('input[name=mr_from]').blur(function(event) {
      if($('input[name=mr_to]').val() == ''){
        $('input[name=mr_to]').val($(this).val());
      }
    });*/

    $('#getCon').click(function(){
      $('.dataTables').dataTable().fnDestroy();
      $('#tbod').html('');
      $.ajax({
          url: "<?php echo base_url($this->session->userdata('forajax').'/search'); ?>",
          type: 'POST',
          dataType: 'json',
          data: $('#search_form').serialize(),
          success: function(data){
            $('#getCon').removeAttr('disabled');
            console.log(data);
            var trHTML = '';
              $.each(data,function(i,item){
                  trHTML += '<tr><td>'+data[i].meter_reader+'</td><td align="right">'+data[i].zone+'</td><td align="right">'+data[i].acct_num+'</td><td>'+data[i].read_time_2+'</td><td>'+data[i].description+'</td></tr>';
               });
            $('#tbod').html(trHTML);
            $('.dataTables').DataTable( {
                "columnDefs": [ {
                  "targets": 'no-sort',
                  "orderable": false,
            } ],
                  "sDom": 'tip'
            });
          }, beforeSend: function(){
              $('#getCon').attr('disabled',true);
          }
        });
    });

  });
 </script>